你未必熟悉的 Web API - Element.classList

介绍

• 可以用来替代以 element.className 访问和操作 CSS 类名的方式
• 返回元素 class 属性的 DOMTokenList，本身只读，但是可以通过自身的 add / remove 等方法修改元素的 class 属性
• 若元素的 class 属性未设置或者为空，则 classList.length 为 0

用法

add( String [, String [, ...]] )

添加任意数量的类名，若类名已存在则会被忽略。

const div = document.createElement('div');
const cls = ["foo", "bar"];

div.className = 'foo'; // 'foo'
div.classList.add(...cls); // 'foo bar'
div.classList.add('bar baz'); // 'foo bar baz'

remove( String [, String [, ...]] )

删除任意数量的类名，若类名不存在，也不会抛出异常。

// 起始：'foo bar baz'
div.classList.remove("foo"); // 'bar baz'

item( Number )

根据索引返回相应的类名。

// 起始：'bar baz'
console.log(div.classList.item(1)); // 输出：'baz'

toggle( String [, force] )

当只有一个参数时：

• 若类名已存在，则删除指定的类名并返回 false
• 若类名不存在，则添加指定的类名并返回 true

当有两个参数时：

• 若第二个参数的值为 true，则添加指定的类名
• 若第二个参数的值为 false，则删除指定的类名

// 起始：'bar baz'
div.classList.toggle("foo"); // 'foo bar baz'
div.classList.toggle("foo"); // 'bar baz'
div.classList.toggle("foo", 2 < 1 ); // 'bar baz'

contains( String )

检查指定的类名是否存在。

// 起始：'bar baz'
console.log(div.classList.contains("foo")); // 输出：false

replace( oldClass, newClass )

用新的类名替换指定的类名。

// 起始：'bar baz'
div.classList.replace("bar", "foo");  // 'foo baz'

兼容性

IE 9 及以下不支持